<template>
  <div class="app-container filter-container">
    <div v-if="bind_city">
      <div class="warning">
        <p> 你的账号<a href="javascript:;"> {{ name }} </a>已绑定至<a href="javascript:;"> {{ bind_city }} </a></p>
        <p> 解除绑定或换更换绑定请联系客服 </p>
      </div>
    </div>
    <div v-else>
      <div class="warning">
        <p> 你的账号<a href="javascript:;"> {{ name }} </a>尚未<a href="javascript:;"> 绑定 </a>到具体的区域，请在下方选择绑定</p>
      </div>
      <div style="width:400px;display: flex;align-items: center" v-loading="bind_cid_loading">
        <el-cascader :options="city" class=" w-200" clearable :props="{checkStrictly: true }"
                     v-model="temp.user_cid" filterable></el-cascader>

        <el-button
          size=""
          type="primary"
          style="margin-left:15px;"
          icon="el-icon-success"
          @click="do_bind_cid"
        >
          绑定
        </el-button>
      </div>
    </div>
  </div>
</template>
<script>
import {bindCity, getCity} from "@/api/user";
import {mapGetters} from 'vuex'

export default {
  data() {
    return {
      bind_cid_loading: false,
      city: [],
      temp: {
        user_cid: ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'bind_city',
      'bind_cid'
    ])
  },
  created() {
    this.getCity()
  },
  methods: {
    getCity() {
      let citys = localStorage.getItem('citys');
      if (!citys) {
        getCity().then(response => {
          this.city = response.data.city
          localStorage.setItem('citys', JSON.stringify(this.city))
        })
      } else {
        this.city = JSON.parse(citys)
      }
    },
    do_bind_cid() {
      if (!this.temp.user_cid) {
        this.$message({
          message: '请选择绑定区域',
          type: 'error'
        })
        return false
      }
      this.bind_cid_loading = true
      bindCity(this.temp).then(async response => {
        await this.$store.dispatch('user/getInfo');
        this.$router.push(`/wz/wz/listme`)
      }, data => {
        this.bind_cid_loading = false
      })
    }
  }
}
</script>
